import React, { Component } from 'react';
import { connect } from 'react-redux';
import {  NavLink } from 'react-router-dom' ;
import {fetchList,addToCart} from '../actions/cart';
import {Detail} from './Detail';

class ProList extends Component {
    constructor(props, context) {
        super(props)
        this.state = {
            lists: {}
        }
        
        this.searchData = this.searchData.bind(this);
        this.addCart = this.addCart.bind(this);
      }
    componentDidMount(){
       this.props.fetchList({...this.props.match.params});
    }
    searchData(){
        var title = this.refs.keywords.value||""
        this.props.fetchList({...this.props.match.params,title});
    }
    changePage(e){
        var title =  this.refs.keywords.value||"";
        var page = e.currentTarget.getAttribute("data-page");
        this.props.fetchList({...this.props.match.params,page,title});
    }
    addCart(e,params){
        this.props.addToCart(params,()=>{
            alert("添加成功");
        })
    }
    render() {
        console.log(this.props.lists);
        const {lists, fetchList,addToCart} = this.props;
		
		if(!lists.rows){
			return <div>数据加载中...</div>
        }
        var output=[];
        var pages = 1; //计算分页数，默认是1页
        var output = [];
        var outputPages = [];
        pages = Math.ceil(lists.total/10); 
        outputPages.push(<a href="javascript:void(0)"  data-page={lists.page-1>0?lists.page-1:1} onClick={(e) => this.changePage(e)} className="prev disabled" >上一页</a>)
        for(let i=1;i<=pages;i++){
            var onstatus = "";
            if(lists.page == i){
                onstatus = "on";
            }
            outputPages.push(<a key={i} href="javascript:void(0)" data-page={i} className={onstatus} 
            onClick={(e) => this.changePage(e)}>{i}</a>)
        }
        outputPages.push(<a href="javascript:void(0)"  data-page={lists.page+1<pages?lists.page+1:pages} onClick={(e) => this.changePage(e)} className="prev disabled" >下一页</a>)
        for(let i=0;i<lists.rows.length;i++){
                 output.push( <li key={i}>
                    <dl>
                        <dt>
                            <NavLink  to={`/detail/${lists.rows[i]._id}`}><img className="lazy" src={lists.rows[i].img} width="100%" height="85%" alt= {lists.rows[i].title} style={{display: 'block'}}/></NavLink>
                        </dt>
                        <dd className="base">
                        
                            <NavLink  to={`/detail/${lists.rows[i]._id}`}>{lists.rows[i].title}</NavLink>
                                <p className="price">
                                <span className="minprice">¥<strong> {lists.rows[i].price}</strong>
                                </span>
                                <span className="maxprice"><del>¥{lists.rows[i].price+50}</del></span>
                                </p>
                        </dd>
                        <dd className="action">
                            <p>
                                <a href="javascript:void(0)" onClick={(e) => this.addCart(e,lists.rows[i])} className="btn-small btn-add2cart"><em>加入购物车</em></a>
                            </p>
                        </dd>
                    </dl>
                </li>)
        }
        return (
            <div>
                  
            <div className="searchDiv">
            <div className="searLeft"><form><input  type="text" placeholder="请输入关键字" value={this.state.value} onChange={this.onInputChange}  className="keyinput" ref="keywords"  defaultValue=""/></form></div>
            <div className="searRight"><input type="submit" onClick={this.searchData} className="fl keysub" value="搜索" style={{border:'0px',background:'none',cursor:'pointer'}}/></div>
             </div>
            <div id="goodsList" className="goods-list">
            <ul className="piclist">
               {output}
            </ul>
            <div className="page" style={{margin:'20px 0px'}}> 
            {outputPages}         
           </div>
            </div>
            </div>
        );
    }
}


const getValue =state=>{
	return {
    lists: state.cartReduce.lists,
    carts: state.cartReduce.carts
  }
}

const ProListContext = connect(getValue,{fetchList,addToCart})(ProList);

export default ProListContext;
